<template>
  <div>
    <!-- 面包屑导航区域 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <!-- <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item> -->

      <el-breadcrumb-item>基础设置</el-breadcrumb-item>
      <el-breadcrumb-item :to="{ path: '/carousel' }"
        >轮播图信息</el-breadcrumb-item
      >
      <el-breadcrumb-item>修改轮播图</el-breadcrumb-item>
    </el-breadcrumb>

    <!-- 卡片视图区域 -->
    <el-card>
      <div class="form_title">
        <h5>轮播图修改</h5>
      </div>
      <!-- 修改轮播图表单 -->
      <el-form ref="form" :model="form" label-width="95px" :rules="formRules">
        <el-form-item label="图片名称：" prop="name">
          <el-col :span="11">
            <el-input v-model="form.name"></el-input>
          </el-col>
        </el-form-item>
        <el-form-item label="上传图片：">
          <div class="uploadButton">
            <el-button size="small" type="primary" @click="showDialog"
              >点击上传</el-button
            ><span> 只能上传jpg/png文件 </span>
          </div>
          <el-image class="uploadImage" style="width: 155px; height: 100px" :src="url"></el-image>
          <!-- action上传地址 -->
          <!-- <el-upload
            class="upload-demo"
            :action="$global.imgURL + 'Images/upload'"
            :on-success="handlePreview"
            :on-remove="handleRemove"
            :on-exceed="handleExceed"
            :file-list="imgList"
            list-type="picture"
            limit="1"
          >
            <el-button size="small" type="primary">点击上传</el-button>
            <span slot="tip" class="el-upload__tip"> 只能上传jpg/png文件 </span>
          </el-upload> -->
        </el-form-item>
        <el-form-item label="分类：">
          <el-col :span="11">
            <el-radio-group v-model="form.type" @change="change">
              <el-radio label="1">奶茶</el-radio>
              <el-radio label="2">商品</el-radio>
              <el-radio label="3">活动</el-radio>
            </el-radio-group>
          </el-col>
        </el-form-item>
        <el-form-item label="指定：" prop="select">
          <el-col :span="12">
            <el-select
              v-model="form.correspondingId"
              placeholder="请选择"
              value-key="id"
              style="width: 100%"
            >
              <el-option
                v-for="item in dataList"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              >
              </el-option>
              <!-- <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page.sync="queryInfo.pageNo"
                :page-size="queryInfo.pageSize"
                layout="total, prev, pager, next"
                :total="totalnum"
              >
              </el-pagination> -->
            </el-select>
          </el-col>
        </el-form-item>

        <el-form-item class="formbutton">
          <el-button
            class="formsubmit"
            type="primary"
            @click="onSubmit"
            >提交</el-button
          >
        </el-form-item>
      </el-form>

      <!-- 剪裁组件弹窗 -->
      <el-dialog
        title="裁切图片"
        :visible.sync="cropperModel"
        width="1200px"
        center
      >
        <cropper-image
          :Name="cropperName"
          ref="child"
          @uploadImgSuccess="handleUploadSuccess"
          :autoCropWidth="autoCropWidth"
          :autoCropHeight="autoCropHeight"
          :fixedNumber="fixedNumber"
        >
        </cropper-image>
      </el-dialog>
    </el-card>
  </div>
</template>

<script>
import CropperImage from "@/components/CropperImage";
export default {
  components: { CropperImage },
  data() {
    return {
      //裁切图片参数
      cropperModel: false,
      cropperName: "",
      imgName: "",
      imgVisible: false,
      autoCropWidth: 403, //默认生成截图框宽度
      autoCropHeight: 260, //默认生成截图框高度
      fixedNumber:[1.53,1],

      url: "",
      labelPosition: "right",
      dataList: [],
      imgList: [{ url: "" }],
      form: {
        name: "",
        image: "",
        type: "",
        correspondingId: "",
      },
      correspondingId: "",
      //计数器
      countChange: 0,
      formRules: {},
      //分页
      queryInfo: {
        pageNo: 1,
        pageSize: 1000,
      },
      totalnum: 50,
      formRules: {
        // 验证用户名是否合法
        name: [{ required: true, message: "请输入登录名称", trigger: "blur" }],
      },
    };
  },
  methods: {
    showDialog() {
      this.cropperModel = true;
    },
    handleUploadSuccess(data) {
      console.log(data);
      this.form.image = data;
      this.url = this.$global.imgURL + data;
      this.cropperModel = false;
    },
    //显示修改轮播图
    async showCarousel(id) {
      const { data: res } = await this.$http.get(
        "carousel/getCarouselById?id=" + id
      );
      console.log(res);
      if (res.code != 200) {
        return this.$message.error("查询轮播图信息失败！");
      }
      this.form.id = res.data.carouselPO.id;
      this.form.name = res.data.carouselPO.name;
      this.url = this.$global.imgURL + res.data.carouselPO.image;
      this.form.image = res.data.carouselPO.image;
      this.form.type = res.data.carouselPO.numType + "";
      this.change();
      //暂存指定物品id
      this.form.correspondingId = res.data.carouselPO.correspondingId;
      // if (this.form.type === "1") {
      //   const { data: res } = await this.$http.get(
      //     "milkyTea/getMilkyTeaById?id=" + this.correspondingId
      //   );
      //   console.log(this.countChange);
      //   console.log("!!!!!!!!!!!!!!!!!!!");
      //   console.log(res);
      //   this.form.correspondingId = res.data.milkyTeaVO.name;
      //   console.log(this.form.correspondingId);
      // }
      // if (this.form.type === "2") {
      //   const { data: res } = await this.$http.get(
      //     "commodity/getCommodityById?id=" + this.correspondingId
      //   );
      //   console.log(res);
      //   this.form.correspondingId = res.data.commodity.name;
      //   console.log(this.correspondingId);
      // }
      // if (this.form.type === "3") {
      //   const { data: res } = await this.$http.get(
      //     "activity/getActivityById?id=" + this.correspondingId
      //   );
      //   console.log("1111111111111111111111111111111");
      //   console.log(res);
      //   this.form.correspondingId = res.data.activity.name;
      //   console.log(this.correspondingId);
      // }
      
    },
    async change() {
      // console.log(this.form.type);
      // this.countChange++;
      // if (this.countChange > 1) {
      //   this.form.correspondingId = "";
      //   // this.correspondingId="";
      // }

      this.form.correspondingId = "";
      var typeid = this.form.type;
      if (typeid === "1") {
        this.dataList = [];
        // const { data: res } = await this.$http.get("milkyTea/listMilkyTea", {
        //   params: this.queryInfo,
        // });
        // if (this.queryInfo.pageNo > res.data.pageCount) {
        //   this.queryInfo.pageNo = 1;
        //   const { data: res } = await this.$http.get("milkyTea/listMilkyTea", {
        //     params: this.queryInfo,
        //   });
        //   this.dataList = res.data.milkyTeaVOs;
        //   this.totalnum = res.data.countMilkyTea;
        //   return;
        // }
        // console.log(this.countChange);
        // console.log("===================");
        // console.log(res);
        // console.log(this.form.correspondingId);
        // this.dataList = res.data.milkyTeaVOs;
        // this.totalnum = res.data.countMilkyTea;
        const { data: res } = await this.$http.get("milkyTea/listMilkyTeaAll");
        console.log("奶茶", res);
        var milkyTea = res.data.milkyTeaTypeXcxVOs;
        for (var i = 0; i < milkyTea.length; i++) {
          this.dataList = this.dataList.concat(milkyTea[i].milkyTeaVOs);
        }
        // this.totalnum = this.dataList.length;
        // this.queryInfo.pageNo = 1;
        // this.queryInfo.pageSize = this.totalnum;
        return;
      }
      if (typeid === "2") {
        this.dataList = [];
        // const { data: res } = await this.$http.get("commodity/listCommodity", {
        //   params: this.queryInfo,
        // });
        // if (this.queryInfo.pageNo > res.data.pageCount) {
        //   this.queryInfo.pageNo = 1;
        //   const { data: res } = await this.$http.get(
        //     "commodity/listCommodity",
        //     {
        //       params: this.queryInfo,
        //     }
        //   );
        //   this.dataList = res.data.commodityVoList;
        //   this.totalnum = res.data.countCommodity;
        //   return;
        // }
        // console.log(res);
        // this.dataList = res.data.commodityVoList;
        // this.totalnum = res.data.countCommodity;
        // return;
        const { data: res } = await this.$http.get(
          "commodity/listCommodityInXCX"
        );
        console.log("商品", res);
        var commodity = res.data.type;
        for (var i = 0; i < commodity.length; i++) {
          this.dataList = this.dataList.concat(commodity[i].commoditys);
        }
        // this.totalnum = this.dataList.length;
        // this.queryInfo.pageNo = 1;
        // this.queryInfo.pageSize = this.totalnum;
      }
      if (typeid === "3") {
        this.dataList = [];
        const { data: res } = await this.$http.get("activity/listActivity", {
          params: this.queryInfo,
        });
        // if (this.queryInfo.pageNo > res.data.pageCount) {
        //   this.queryInfo.pageNo = 1;
        //   const { data: res } = await this.$http.get("activity/listActivity", {
        //     params: this.queryInfo,
        //   });
        //   this.dataList = res.data.activities;
        //   this.totalnum = res.data.count;
        //   return;
        // }
        console.log(res);
        this.dataList = res.data.activities;
        this.totalnum = res.data.count;
        return;
      }
    },
    handleSizeChange(val) {
      //console.log(`每页 ${val} 条`);
      this.pagesize = val;
    },
    handleCurrentChange(val) {
      //console.log(`当前页: ${val}`);
      this.currentPage = val;
      this.change();
    },
    //提交调用相应的接口
    onSubmit() {
      this.$refs.form.validate(async (valid) => {
        console.log(this.form);
        if (this.form.correspondingId === "") {
          this.$message.error("请选择指定商品");
          return;
        }
        if (this.form.image === "") {
          this.$message.error("请上传图片");
          return;
        }
        console.log("valid:" + valid);
        if (valid) {
          console.log(this.form, "submit");
          if (this.countChange === 1) {
            this.form.correspondingId = this.correspondingId;
          }

          console.log(this.form);
          //调用提交接口
          const { data: res } = await this.$http.post(
            "carousel/updateCarousel",
            this.form
          );
          console.log(res);
          if (res.code != 200) {
            this.$message.error(res.massage);
            return;
          }
          this.$message.success("修改轮播图成功！");
          this.$router.replace("/carousel");
        } else {
          console.log("表单问题");
          return;
        }
      });
    },
  },
  created() {
    console.log(this.$route.params.id);
    this.showCarousel(this.$route.params.id);
  },
};
</script>

<style lang="less" scoped>
.form_title {
  height: 40px;
  text-align: left;
  line-height: 0px;
  letter-spacing: 1px;
  border-left: rgba(64, 158, 255, 0.781) solid 3px;
  box-shadow: 0 3px 8px #ddd;
  padding-left: 10px;
  margin-top: 0px;
  overflow: hidden;
}

.el-form {
  width: 800px;
  margin: 50px auto;
  text-align: center;
  padding-left: 350px;
}
.formbutton,
.state {
  position: relative;
}
.formbutton .formsubmit,
.state .stateRadio {
  position: absolute;
  left: 80px;
}
</style>
